// load 页面所有文件加载完才会执行
window.addEventListener('load', function () {
    // 商品介绍的js  
    // (1)上的模块选项卡:点击某一个，当前的一个底色会是红色,其余的不变(排他思想)修改类名的方式
    // 1.获取元素
    var lis = document.querySelector('.spjs_hd').querySelectorAll('li');
    var items = document.querySelector('.tab_con').querySelectorAll('.spjs_bd');
    for (var i = 0; i < lis.length; i++) {
        //(5)   开始给5个小li 设置索引号
        lis[i].setAttribute('index', i);
        lis[i].onclick = function () {
            // for 循环绑定点击事件
            for (var i = 0; i < lis.length; i++) {
                // (2)干掉所有人 其余的li清除 current 这个类
                lis[i].className = '';
            }
            // 留下我自己
            this.className = 'current';
            // 2.显示内容模块   getAttribute获取自定义属性
            // 获取当前点击的索引号
            var index = this.getAttribute('index');
            for (var j = 0; j < items.length; j++) {
                // 干掉所有人 清除其余的 item 内容
                items[j].style.display = 'none';
            }
            // 留下我自己 显示点击的哪一个 item 内容
            items[index].style.display = 'block';
        }
    }
    // 手机图片切换 开始
    //  左侧内容 的js
    // 1.获取元素
    // 获取内容图片img盒子
    var souji_img = document.querySelector('.souji_img');//内容的img
    // ul切换栏下面的li-img
    var sj_bd_in = document.querySelector('.spec-items').querySelectorAll('img');//li 的img
    // 获取切换内容图片的ul盒子
    var specjpg = document.querySelector('.spec-jpg').querySelectorAll('img');
    // 获取切换放大镜图片的ul img
    var uploadshoujia = document.querySelector('.uploadshoujia').querySelectorAll('img');
    // 获取放大镜图片盒子
    var big = document.querySelector('.big');
    // 获取放大镜图片盒子 的img
    var bigimg = document.querySelector('.big').querySelector('img');
    // 获取左侧按钮
    var specforward = document.querySelector('.spec-forward');
    // 获取右侧按钮
    var specbackward = document.querySelector('.spec-backward');
    // 2.注册事件 处理程序 spec-items
    //sj_bd_in== ul切换栏下面的li-img
    for (var i = 0; i < sj_bd_in.length; i++) {
        // spec-items
        //给小li 设置索引号  onmouseover  鼠标经过触发
        sj_bd_in[i].setAttribute('index', i);
        sj_bd_in[i].addEventListener('mouseover', function () {
            // 获取当前点击的索引号
            var index = this.getAttribute('index');
            push = index;
            // 更换内容图片地址
            souji_img.src = specjpg[index].src;
            //  更换放大镜图片地址
            bigimg.src = uploadshoujia[index].src;
            // 调用边框函数
            borderred();
        })
    }
    var push = 0;
    // 左侧按钮
    specforward.addEventListener('click', function () {
        push--;
        if (push < 0) {
            push = sj_bd_in.length - 1;
        }
        // console.log(push);
        // 更换内容图片地址
        souji_img.src = specjpg[push].src;
        //  更换放大镜图片地址
        bigimg.src = uploadshoujia[push].src;
        // 调用边框函数
        borderred();
    });
    //右侧按钮
    specbackward.addEventListener('click', function () {
        push++;
        if (push == sj_bd_in.length) {
            push = 0;
        }
        // 更换内容图片地址 
        souji_img.src = specjpg[push].src;
        //  更换放大镜图片地址
        bigimg.src = uploadshoujia[push].src;
        // 调用边框函数
        borderred();
    });
    // 把边框函数封装起来
    function borderred() {
        // 更换边框类
        // 干掉其它人
        for (var i = 0; i < sj_bd_in.length; i++) {
            sj_bd_in[i].className = '';
        }
        // 留下我自己
        sj_bd_in[push].className = 'borderred';
    };
    // 手机图片切换 结束
    // 产品介绍模块 js开始 遮罩层 和放大镜
    // 1.获取元素
    var souji = document.querySelector('.souji');
    // 获取遮罩层盒子
    var mask = document.querySelector('.mask');
    // 2.当我们鼠标经过souji就显示和隐藏mask 和big  mouseover 标经过触发
    souji.addEventListener('mouseover', function () {
        mask.style.display = 'block';
        big.style.display = 'block';
    });
    // 3.onmouseout     鼠标离开触发
    souji.addEventListener('mouseout', function () {
        mask.style.display = 'none';
        big.style.display = 'none';
    });
    // 3.盒子跟着鼠标拖动  鼠标移动mousemove 把鼠标在盒子内的距离给盒子
    souji.addEventListener('mousemove', function (e) {
        //(1)鼠标在盒子内的距离=鼠标距离文档的距离-盒子到文档的距离
        var X = e.pageX - this.offsetLeft;
        var Y = e.pageY - this.offsetTop;
        // 要记得拼接单位
        // (2)盒子高度的一半是150  mask.offsetWidth获取盒子的宽度  mask.offsetHeight 获取盒子的高度
        // (3)mask遮罩层 的移动距离
        var maskX = X - mask.offsetWidth / 2;
        var maskY = Y - mask.offsetHeight / 2;
        // mask遮罩层最大的移动距离
        var maskMaxX = souji.offsetWidth - mask.offsetWidth;
        var maskMaxY = souji.offsetHeight - mask.offsetHeight;
        // (4)限制)mask遮罩层 的移动距离 如果x的坐标小于0就让他停在0的位置
        if (maskX <= 0) {//x左边
            maskX = 0;

        } else if (maskX >= maskMaxX) {//x右边  盒子的大小-mask遮罩层的大小==100
            maskX = maskMaxX;
        }
        if (maskY <= 0) {//Y上边
            maskY = 0;
        } else if (maskY >= maskMaxY) {//Y下边
            maskY = maskMaxY;
        }
        mask.style.left = maskX + 'px';
        mask.style.top = maskY + 'px';
        // 5.大图片跟着移动 按比例来移动
        // 1/2=x/4 x?  x=1*4/2  遮罩层移动距离/mask遮罩层最大的移动距离=大图片的移动距离/大图片最大的移动距离
        // 大图片的移动距离=mask遮罩层移动距离*大图片最大的移动距离/mask遮罩层最大的移动距离
        // 大图 获取放大镜图片 img 
        var bigImg = document.querySelector('.bigImg');
        // 大图片最大的移动距离
        var bigMax = big.offsetWidth - bigImg.offsetWidth;
        // console.log(bigMax);
        // 大图片的移动距离
        var bigX = maskX * bigMax / maskMaxX;
        var bigY = maskY * bigMax / maskMaxY;
        bigImg.style.left = bigX + 'px';
        bigImg.style.top = bigY + 'px';
    });
    // 手机样式选择模块sj_bd_xz_ul
    var sj_bddiv1 = document.querySelector('.sj_bddiv1').querySelectorAll('button');
    var sj_bddiv2 = document.querySelector('.sj_bddiv2').querySelectorAll('button');
    var sj_bddiv3 = document.querySelector('.sj_bddiv3').querySelectorAll('button');
    var sj_bddiv4 = document.querySelector('.sj_bddiv4').querySelectorAll('button');
    var sj_bddiv5 = document.querySelector('.sj_bddiv5').querySelectorAll('button');
    // sj_bddiv1
    for (var i = 0; i < sj_bddiv1.length; i++) {
        sj_bddiv1[i].addEventListener('click', function (e) {
            for (var i = 0; i < sj_bddiv1.length; i++) {
                sj_bddiv1[i].className = '';
            }
            e.target.className = 'borderred';
        })
    }
    // sj_bddiv2
    for (var i = 0; i < sj_bddiv2.length; i++) {
        sj_bddiv2[i].addEventListener('click', function (e) {
            for (var i = 0; i < sj_bddiv2.length; i++) {
                sj_bddiv2[i].className = '';
            }
            e.target.className = 'borderred';
        })
    }
    // sj_bddiv3
    for (var i = 0; i < sj_bddiv3.length; i++) {
        sj_bddiv3[i].addEventListener('click', function (e) {
            for (var i = 0; i < sj_bddiv3.length; i++) {
                sj_bddiv3[i].className = '';
            }
            e.target.className = 'borderred';
        })
    }
    // sj_bddiv4
    for (var i = 0; i < sj_bddiv4.length; i++) {
        sj_bddiv4[i].addEventListener('click', function (e) {
            for (var i = 0; i < sj_bddiv4.length; i++) {
                sj_bddiv4[i].className = '';
            }
            e.target.className = 'borderred';
        })
    }
    // sj_bddiv5
    for (var i = 0; i < sj_bddiv5.length; i++) {
        sj_bddiv5[i].addEventListener('click', function (e) {
            if (e.target.className == 'borderred') {
                e.target.className = '';
            } else if (e.target.className == '') {
                for (var i = 0; i < sj_bddiv5.length; i++) {
                    sj_bddiv5[i].className = '';
                }
                e.target.className = 'borderred';
            }
        })
    }
    // 加入购物车模块制作
    // 获取加号按钮
    var sj_bd_xz_jia = document.querySelector('.sj_bd_xz_jia');
    // 获取减号按钮
    var sj_bd_xz_arr = document.querySelector('.sj_bd_xz_arr');
    // 获取文本输入框
    var sj_bd_xz_input = document.querySelector('.sj_bd_xz_input');
    var xz_jia = 1;
    // 加号按钮
    sj_bd_xz_jia.addEventListener('click', function () {
        xz_jia++;
        sj_bd_xz_input.value = xz_jia;
    });
    xz_jia = sj_bd_xz_input.value;
    // 减号按钮
    sj_bd_xz_arr.addEventListener('click', function () {
        if (xz_jia > 1) {
            xz_jia--;
        }
        sj_bd_xz_input.value = xz_jia;
    });
    // 点击播放视频
    // 获取视频的大盒子
    var sj_bd_video = document.querySelector('.sj_bd_video');
    // 获取视频播放按钮 video
    var souji_span = document.querySelector('.souji_span');
    // 获取视频盒子
    var video = document.querySelector('video');
    // 获取关闭视频按钮
    var soujia = document.querySelector('.sj_bd_videoa');
    // // 获取视频暂停按钮 
    var before = document.querySelector('.before');
    souji_span.addEventListener('click', function () {
        sj_bd_video.style.display = 'block';
        // 播放视频
        video.play();
    });
    var videoi = 1;
    video.addEventListener('click', function () {
        if (videoi == 1) {
            before.style.display = 'block';
            videoi = 0;
        } else {
            before.style.display = 'none';
            videoi = 1;
        }
        // 
    });
    // onmouseover  鼠标经过触发
    video.addEventListener('mouseover', function () {
        before.style.backgroundColor = '#c81623';
    });
    // onmouseout     鼠标离开触发
    video.addEventListener('mouseout', function () {
        before.style.backgroundColor = ' #50443D';
    });
    // 关闭视频按钮
    soujia.addEventListener('click', function () {
        // 暂停当前播放的视频和音频
        video.pause();
        sj_bd_video.style.display = 'none';
    });
    // 判断用户是否完整的观看完了一部视频，获取视频长度，视频开始播放，暂停播放和播放结束
    // 1.视频加载后获取视频的长度
    // onloadedmetadata 事件在指定视频/音频（audio/video）的元数据加载后触发
    video.addEventListener('loadedmetadata', function () { //加载数据
        //视频的总长度   duration 属性返回当前视频的长度，以秒计
        // console.log(video.duration);
    });
    // 2. 视频开始播放
    video.addEventListener('play', function () { //播放开始执行的函数
        // 开始播放 隐藏播放按钮
        before.style.display = 'none';
        // console.log("开始播放");
    });
    // 3. 视频正在播放中 视频播放时弹出提示信息：
    video.addEventListener('playing', function () { //播放中
        // console.log("播放中");
    });
    // 4.视频加载中
    video.addEventListener('waiting', function () { //加载
        // before.style.display = 'block';
        // console.log("加载中");
    });
    // 5.视频暂停播放
    video.addEventListener('pause', function () { //暂停开始执行的函数
        // console.log("暂停播放");
    });
    // 6.视频结束播放 ended查看音频是否播放结束：
    video.addEventListener('ended', function () { //结束
        // 播放结束 显示播放按钮
        before.style.display = 'block';
        // console.log("播放结束");
    });
    // 顶部右边侧边栏模块制作 滚动到一定的距离 sliderbar盒子改为固定定位
    // 1.获取元素
    // 获取顶部右边侧边栏
    var sliderbar = document.querySelector('.slider-bar');
    // 获取游戏盒子
    var search = document.querySelector('#sliderbarTOP');
    // 顶部右边侧边栏 距离顶部的距离
    var sliderbarTOP = sliderbar.offsetTop;
    //search 距离顶部的距离
    var searchTop = search.offsetTop;
    // 固定定位之后的值
    var Fixed = sliderbarTOP - searchTop;
    // 获取返回顶部的按钮
    var goBack = document.querySelector('.goBack');
    // 获取要判断要返回顶部的距离
    var like = document.querySelector('.like');
    var liketop = like.offsetTop;
    // console.log(like);
    // console.log(liketop);
    // 2.scroll 滚动事件 当滚动条发生变化会触发的事件
    document.addEventListener('scroll', function () {
        // 页面被卷去的头部是window.pageYOffset获取
        var top = window.pageYOffset;
        if (top >= searchTop) {
            sliderbar.style.position = 'fixed';
            sliderbar.style.top = Fixed + 'px';
            // sliderbar.style.top = 60 + 'px'; 不能写死不然效果不好
        } else {
            sliderbar.style.position = 'absolute';
            sliderbar.style.top = sliderbarTOP + 'px';
        }
        // 返回顶部

        if (top >= liketop) {
            goBack.style.display = 'block';
        } else {
            goBack.style.display = 'none';
        }
    });
    // 点击按钮返回顶部
    goBack.addEventListener('click', function () {
        // 调用浏览器滚动的缓动动画
        windowanimate(goBack, 0);
        // console.log(11);
    });
})
